import { useEffect, useRef } from 'react';

const DescriptionBox = ({ description }: { description: string }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  //replace some escape characters
  const removeEscapeCharacters = (str: string) => {
    return str.replace(/\\("|')/g, '$1').replace(/\\\\/g, '\\');
  };

  useEffect(() => {
    if (containerRef.current) {
      // create a shadow root in the container, insert the body and div into it, and append the description into the div
      const shadowRoot = containerRef.current.attachShadow({ mode: 'open' });
      const body = document.createElement('body');
      const div = document.createElement('div');
      div.className = 'shadow-description-box';
      div.innerHTML = removeEscapeCharacters(description);
      body.appendChild(div);
      shadowRoot.appendChild(body);
    }
  }, [description]);

  return <div className="description-box" ref={containerRef}></div>;
};

export default DescriptionBox;
